import React, { Component } from 'react';
import { View, Image } from '@tarojs/components'
import Taro, { getCurrentInstance } from '@tarojs/taro'
import { timestampToTime, transformData } from '@/utils'
import { SpNavBar } from '@/components'
import api from '@/api'
import { AtList, AtListItem, AtAccordion } from "taro-ui"
import './index.scss'
import { connect } from 'react-redux'

@connect(({ user }) => ({
    userinfo: user.userInfo
}),
    (dispatch) => ({ dispatch })
)
class MerchantInfo extends Component {
    constructor(props) {
        super(props);
    }
    state = {
        openOne: false,
        openTwo: false,
        openThree: false,
        openFour: false,
        infoCell: [
            { title: '商户名称', key: 'merchant_name' },
            { title: '统一社会信用代码', key: 'social_credit_code_id' },
            { title: '所在省市区', key: 'ssq' },
            { title: '详细地址', key: 'address' },
            { title: '负责人姓名', key: 'legal_name' },
            { title: '负责人身份证号', key: 'legal_cert_id' },
            { title: '负责人手机号', key: 'legal_mobile' },
            { title: '联系邮箱', key: 'email' },
            { title: '代理商', key: 'agent_name' },
        ],
    }
    render() {
        const { userinfo } = this.props
        return (
            <>
                <SpNavBar title='商家信息'></SpNavBar>
                <View className='merchant-list'>
                    <AtAccordion open={this.state.openOne} isAnimation={false} title='企业信息' onClick={(value) => { this.setState({ openOne: value }) }}>

                        <AtList className=''>
                            {this.state.infoCell.map((item, index) => {
                                return (<AtListItem key={index} title={item.title} note={item.key == 'ssq' ? `${userinfo.province}/${userinfo.city}/${userinfo.area}` : userinfo[item.key]} />)
                            })}
                        </AtList>
                    </AtAccordion >
                    <AtAccordion open={this.state.openTwo} isAnimation={false} title='结算账户信息' onClick={(value) => { this.setState({ openTwo: value }) }}>
                        <AtList className=''>
                            <AtListItem title='结算银行账户类型' extraText={userinfo.bank_acct_type === '1' ? '对公' : '对私'} />
                            <AtListItem title='结算银行卡所属银行' note={userinfo.bank_name} />
                            <AtListItem title='结算银行卡号' note={userinfo.card_id_mask} />
                        </AtList>
                    </AtAccordion >
                    <AtAccordion open={this.state.openThree} isAnimation={false} title='入驻信息' onClick={(value) => { this.setState({ openThree: value }) }}>
                        <AtList className=''>
                            <AtListItem title='商户类型' extraText={userinfo.merchant_type_parent_name} />
                            <AtListItem title='经营范围' extraText={userinfo.merchant_type_name} />
                            <AtListItem title='审核商品' extraText={userinfo.audit_goods ? '是' : '否'} />
                        </AtList>
                    </AtAccordion >
                    <AtAccordion open={this.state.openFour} isAnimation={false} title='证照信息' onClick={(value) => { this.setState({ openFour: value }) }}>
                        <View className='components-page'>
                            <View className='title'>营业执照</View>
                            <Image className='imgae-one'
                                style='background: #fff;'
                                mode="aspectFit"
                                src={userinfo.legal_certid_front_url}
                            />
                        </View>
                        <View className='components-page'>
                            <View className='title'>法人身份证照</View>
                            <View className='image-flex'>
                                <Image
                                    className='imgae-two'
                                    style='background: #fff;'
                                    mode="aspectFit"
                                    src={userinfo.legal_certid_front_url}
                                />
                                <Image
                                    className='imgae-two'
                                    style='background: #fff;'
                                    mode="aspectFit"
                                    src={userinfo.legal_cert_id_back_url}
                                />
                            </View>

                        </View>
                        <View className='components-page'>
                            <View className='title'>结算银行卡正面照</View>
                            <Image
                                className='imgae-one'
                                style='background: #fff;'
                                mode="aspectFit"
                                src={userinfo.legal_certid_front_url}
                            />
                        </View>
                        <View className='components-page'>
                            <View className='title'>合同</View>
                            <Image
                                className='imgae-one'
                                style='background: #fff;'
                                mode="aspectFit"
                                src={userinfo.contract_url}
                            />
                        </View>
                    </AtAccordion >
                </View>

            </>
        );
    }
}

export default MerchantInfo;